<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 定义模板 -->
    <div id="app">
      <p v-big="count"></p>
      <button @click="++count">按钮</button>
    </div>
    <hr />
    <div id="root">
      <p v-big="count"></p>
      <button @click="++count">按钮</button>
      <input type="text" v-focus-bind="count" />
    </div>

    <!-- 引入vue.js -->
    <script src="./vue.js"></script>
    <script src="./dayjs.min.js"></script>

    <!-- 创建vue实例,绑定模板 -->
    <script>
      // 需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
      //需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

      // 定义全局自定义指令
      Vue.directive('big', function (element, binding) {
        element.innerText = binding.value * 10
      })
      const vm = new Vue({
        el: '#app',
        data: {
          count: 1,
        },
        // directives: {
        // 键 就是指令的名称
        // 注意: 定义指令时,无需写v-.但是使用时要写v-
        // big: {
        //   // 当自定义指令和标签元素绑定成功的时候触发(最早触发)
        //   bind(element, binding) {
        //     // console.log('bind', element, binding)
        //     element.innerText = binding.value * 10
        //   },
        //   // 当自定义指令所对应的标签元素成功的渲染到页面上的时候触发(第二触发)
        //   // inserted(element, binding) {
        //   //   // console.log('inserted', element, binding)
        //   //   element.innerText = binding.value * 10
        //   // },
        //   // 当自定义指令所对应的标签元素更新的时候触发(第三触发)
        //   update(element, binding) {
        //     // console.log('update', element, binding)
        //     element.innerText = binding.value * 10
        //   },
        // },
        // 自定义指令的简写:
        // 这个big函数就是上面big:{}的简写.这个函数调用了bind和update
        //   big(element, binding) {
        //     element.innerText = binding.value * 10
        //   },
        // },
      })

      const vmRoot = new Vue({
        el: '#root',
        data: {
          count: 10,
        },
        directives: {
          'focus-bind': {
            bind(element, binding) {
              console.log('this', this)
              element.value = binding.value
            },
            inserted(element, binding) {
              element.focus()
            },
            update(element, binding) {
              element.value = binding.value
            },
          },
        },
      })
    </script>
  </body>
</html>
